import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { LoginOtpForm, LoginPasswordForm } from "../data"
import { useMemo } from "react"

export default function SubmitButton({
    onSubmit: _onSubmit,
    className,
    children,
}: {
    onSubmit: (data: typeof LoginOtpForm._type.FormValues) => void
    className?: string
    children?: React.ReactNode
}) {
    const form = LoginOtpForm.useFormContext()
    const onSubmit = form.handleSubmit(_onSubmit)
    const disabled = useMemo(() => {
        return (!form.formState.isValid && form.formState.submitCount === 0) || form.formState.isSubmitting
    }, [form.formState.isValid, form.formState.isSubmitting, form.formState.submitCount])

    return (
        <ButtonRegular
            type="submit"
            disabled={disabled}
            onClick={onSubmit}
            className={className}
            style={{ boxShadow: "none", fontWeight: 500 }}
        >
            {children ?? "Submit"}
        </ButtonRegular>
    )
}

export function SubmitButtonPassword({
    onSubmit: _onSubmit,
    className,
    children,
}: {
    onSubmit: (data: typeof LoginPasswordForm._type.FormValues) => void
    className?: string
    children?: React.ReactNode
}) {
    const form = LoginPasswordForm.useFormContext()
    const onSubmit = form.handleSubmit(_onSubmit)
    const disabled = useMemo(() => {
        return !form.formState.isValid || form.formState.isSubmitting
    }, [form.formState.isValid, form.formState.isSubmitting])

    return (
        <ButtonRegular
            type="submit"
            disabled={disabled}
            onClick={onSubmit}
            className={className}
            style={{ boxShadow: "none", fontWeight: 500 }}
        >
            {children ?? "Submit"}
        </ButtonRegular>
    )
}
